<template>
    <el-card class="sales">
        <!-- 销售的头部结构 -->
        <template #header>
            <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">销售额</el-menu-item>
                <el-menu-item index="2">访问量</el-menu-item>
            </el-menu>
            <!-- 头部右侧 -->
            <div class="right">
                <el-radio-group v-model="state.time" label="size control">
                    <el-radio-button label="今日">今日</el-radio-button>
                    <el-radio-button label="本周">本周</el-radio-button>
                    <el-radio-button label="本月">本月</el-radio-button>
                    <el-radio-button label="本年">本年</el-radio-button>
                </el-radio-group>
                <el-date-picker v-model="state.time2" type="daterange" unlink-panels range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" />
            </div>
        </template>
        <!-- 底下柱状图和右侧的列表项 -->
        <div class="sales-content">
          <v-chart :option="getOption()" autoresize></v-chart>
      <div class="sales-content-list">
        <h4 class="list-title">{{state.activeIndex==='1'?'订单销售额排行':'用户访问量排行'}}</h4>
        <ul>
          <li v-for="rank in rankData" :key="rank.no"><span :class="{'list-no':rank.no<4}">{{rank.no}}</span><span>{{rank.name}}</span><span>{{rank.count}}</span></li>
        </ul>
      </div>
    </div>
    </el-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: ''
});
</script>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
const state = reactive({
  activeIndex: '1',
  time: '本周',
  time2:''
})
const handleSelect = (value:string) => {
  state.activeIndex = value 
};

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];
</script>

<style scoped lang="scss">
.sales {
  margin-top: 20px;

  :deep(.el-card__header) {
    position: relative;
    padding: 0 20px;
    border-bottom: none;
    .right {
      position: absolute;
      top: 0;
      right: 20px;
      height: 100%;
      display: flex;
      align-items: center;
      .el-date-editor {
        margin-left: 20px;
      }
    }
  }
}
</style>